<template>
    <div>
        <h3>评论子组件</h3>
        <hr>
        <textarea placeholder="请输入评论的内容(最大120字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postcomment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,index) in comments" :key="index">
                <div class="cmt-title">
                      第 {{index+1}} 楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time | dataFormat}}
                </div>
                <div class="cmt-body">
                  {{item.content === 'undefined' ? '此用户很懒': item.content}}
                </div>
            </div> 
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>

    </div>  
</template>

<script>
import {Toast}  from 'mint-ui'

    export default {
        data(){
            return{
                pageindex: 1,
                comments:[],
                msg:''
            }
        },
        props:["id"],
        created() {
            this.getComments()
        },
        methods:{
            getComments(){ // 获取评论
                this.$http.get("api/getcomments/" + this.id + "?pageindex=" + this.pageindex).then(res =>{
                    if(res.body.status === 0){
                        // this.comments = res.body.message; 
                        this.comments = this.comments.concat(res.body.message)
                    }else{
                        Toast("获取评论失败！")
                    }
                })
            },
            // 加载
            getMore(){
                this.pageindex++,
                this.getComments()
            },
            //发表评论
            postcomment(){
                if(this.msg.trim().length ===0 ){
                    return Toast("评论不能为空")
                }
                this.$http.post("api/postcomment/" + this.$route.params.id, { content:this.msg.trim()}).then(res =>{
                    if(res.body.status ===0 ){ 
                       var cmt = {user_name :"匿名用户",add_tiem : Date.now(),content:this.msg.trim()}
                       this.comments.unshift(cmt); 
                       this.msg = ""
                    }else{
                        
                    }
                })
            }
        }
    }
</script>

<style scoped>
    textarea{
        font-size: 14px;
        height: 85px;
        margin: 0;
    }
    .cmt-list{
        margin: 10px 0;
    }
    .cmt-title{
        background: #ccc;
        font-size: 13px;
        line-height: 35px;;
    }
    .cmt-body{
        line-height: 35px;
        text-indent: 2em;
    }
</style>